#@layout()

#define css()
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
<link href="/static/components/simplemde/simplemde.min.css" rel="stylesheet">
<style>
    .lockscreen-name{
        text-align: center;
    }
    body{
        line-height: 1;
    }
</style>
#end

#define script()
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>
    /**
     * [通过参数名获取url中的参数值]
     * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
     * @param  {[string]} queryName [参数名]
     * @return {[string]}           [参数值]
     */
    function GetQueryValue(queryName) {
        var query = decodeURI(window.location.search.substring(1));
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == queryName) { return pair[1]; }
        }
        return null;
    }

    // 进行验证
    function doAuth(self, code){
        var $btn = $(self).addClass("disabled");
        $btn.find(".fa").hide();
        $btn.find(".fa-refresh").show();
        var redirect = GetQueryValue("redirect") || "/admin";
        // $.showLoading();
        ajaxPost('#(CAPTH)/admin/articlesync/ssa/doSSAuth', {
            "redirect" : decodeURIComponent(redirect),
            "code" : code
        }, function (result) {
            $btn.removeClass("disabled").find(".fa").hide();
            $btn.find(".fa-check").show();
            setTimeout(document.location.href = decodeURIComponent(redirect), 5000);
        }, function (result){
            setTimeout( function(){
                $btn.removeClass("disabled").find(".fa").hide();
                $btn.find(".fa-arrow-right").show();
            }, 1000)

            showErrorMessage(result.message);
        })
    }

    // 显示两步验证充重置方法
    function showResetAlert(){
        $.alert("<pre><code class=\"lang-SQL\">" +
            "<span class=\"hljs-keyword\">DELETE</span> " +
            "<span class=\"hljs-keyword\">FROM</span> " +
            "<span class=\"hljs-string\">`option`</span> " +
            "<span class=\"hljs-keyword\">WHERE</span> " +
            "<span class=\"hljs-string\">`key`</span>" +
            "=<span class=\"hljs-string\">'articlesync_ssa_config'</span>\n" +
            "</code></pre>", "登陆JPress数据库运行");
    }

</script>
#end

#define content()
<div class="content-wrapper" style="padding-top: 20%;">
    <!--<div class="lockscreen-logo">-->
        <!--&lt;!&ndash;<b>Admin</b>&ndash;&gt;-->
        <!--验证以继续操作-->
    <!--</div>-->
    <!-- User name -->
    <!--<div class="lockscreen-name">#(USER.nickname ??)</div>-->

    <!-- START LOCK SCREEN ITEM -->
    <div class="lockscreen-item">
        <!-- lockscreen image -->
        <div class="lockscreen-image">
            <img src="#(USER.avatar ??)" alt="User Image">
        </div>
        <!-- /.lockscreen-image -->

        <!-- lockscreen credentials (contains the form) -->
        <form class="lockscreen-credentials">
            <div class="input-group">
                <input type="password" id="password" class="form-control" placeholder="Auth Code" maxlength="6" minlength="6"/>
                <div class="input-group-btn">
                    <button type="button" class="btn" onclick="doAuth(this, $('#password').val())">
                        <i class="fa fa-arrow-right text-muted"></i>
                        <i class="fa fa-refresh fa-spin text-muted" style="display:none"></i>
                        <i class="fa fa-check text-muted" style="color:green;display:none"></i>
                    </button>
                </div>
            </div>
        </form>
        <!-- /.lockscreen credentials -->

    </div>
    <!-- /.lockscreen-item -->
    <div class="help-block text-center">
        两步验证已开启 <a href="javascript:showResetAlert()">重置</a>
    </div>
    <div class="text-center">

    </div>
</div>
#end
